<template>
  <view class="set-password">
    <u--form class="wrap" :model="form" ref="uForm" :labelStyle="labelStyle">
      <view>
        <view class="form-item">
          <u-form-item label="昵称" labelWidth="87" prop="nickName" borderBottom>
            <u--input placeholder="请输入昵称" border="none" v-model="form.nickName" maxlength="6" type="text"></u--input>
          </u-form-item>
        </view>
        <view class="form-item">
          <u-form-item label="手机号" labelWidth="87" prop="mobile" borderBottom>
            <u-input placeholder="点击右边按钮获取" border="none" v-model="form.mobile"  maxlength="6" type="number">
              <template slot="suffix">
                <u-button shape="circle" @click="getCode()" customStyle="padding:0rpx 24rpx" size="small" :color="codeButtonColor" :disabled="!(!isSendCode && !isClickCode)">{{smsCodeText}}</u-button>
              </template>
            </u-input>
          </u-form-item>
        </view>
        <view class="form-item">
          <u-form-item label="密码" labelWidth="87" prop="password" borderBottom>
            <u--input placeholder="请输入密码" border="none" v-model="form.password" maxlength="6" type="text"></u--input>
          </u-form-item>
        </view>
      </view>
      <u-button  @click="submit()" :color="codeButtonColor" :customStyle="submitCustomStyle" shape="circle">完成注册</u-button>
    </u--form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      operation: 'register',
      form: {
        password: '',
        mobile: '',
        nickName: ''
      },
      labelStyle: {
        color: 'rgba(0, 0, 0, 0.9)',
        fontSize: '26rpx',
        lineHeight: '38rpx',
      },
      codeButtonColor: 'rgb(126, 125, 243)',
      isSendCode: false,		// 是否有发送验证码
      isClickCode: false,		//是否点击验证码按钮
      smsCodeText: "获取手机号码",
      codeTimer: 0,
      submitCustomStyle: {
        height: '88rpx',
        marginTop: '200rpx',
        fontSize: '32rpx',
      },
    };
  },
  methods: {

    //提交
    submit() {
		if (this.$u.test.isEmpty(this.form.nickName)) {
			this.$helpers.toast('请输入昵称');
			return
		}
		if (this.$u.test.isEmpty(this.form.mobile)) {
			this.$helpers.toast('请输入手机号');
			return
		}
		if (!this.$u.test.mobile(this.form.mobile)) {
			this.$helpers.toast('手机号格式有误');
			return
		}
		if (this.form.password.length != 6) {
			this.$helpers.toast('请输入6位数密码');
			return;
		}
		let  body = {
			'nickName': this.form.nickName,
			'mobile': this.form.mobile,
			'password': this.form.password,
		};
		this.$api("member.registerMember", body).then(res => {
			uni.hideLoading();
			if (res.status == 0) {
				
			} else {
				if(res.msg == null || res.msg == ''){
					res.msg = '操作失败';
				}
				this.$helpers.toast(res.msg);
			}
		}).catch(err => {
			uni.hideLoading();
			if(err.errMsg == null || err.errMsg == ''){
				err.errMsg = '操作失败';
			}
			this.$helpers.toast(err.errMsg);
		})
    },

  }
}
</script>

<style lang="scss">
.activate{
  color: #FFFFFF;
  background: rgb(126, 125, 243);
  border-radius: 60rpx;
  width: 300rpx !important;
  font-weight: 600;
}

.set-password{
  margin: 0 30rpx;

  .nav-header{
    width: 480rpx;
    height: 72rpx;
    box-sizing: border-box;
    border: 1px solid rgb(223, 223, 223);
    border-radius: 60rpx;
    margin: 200rpx auto 0 auto;
    display: flex;
    color: rgba(0, 0, 0, 0.6);
    font-size: 26rpx;
    line-height: 72rpx;
    text-align: center;
    margin-bottom: 10rpx;

    .update-password{
      width: 240rpx;
      flex-grow: 1;
    }
    .reset-password{
      width: 240rpx;
      flex-grow: 1;
    }
  }

  .form-item{
    margin-top: 53rpx;

  }

}

</style>
